import React, { useState } from 'react'
import { NavBar, Tag, List } from 'antd-mobile'
import { Checkbox, Space } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'
import { Form, Input, Button } from 'antd-mobile'
import { AddCircleOutline } from 'antd-mobile-icons'
import { ActionBar } from 'react-vant'
function Index() {
  const nav = useNavigate()
  const [sp] = useSearchParams()
  const start = sp.get('start')
  const end = sp.get('end')
  const price = sp.get('price')
  const startTime = sp.get('startTime')
  const endTime = sp.get('endTime')
  const time = sp.get('time')
  const cc = sp.get('cc')
  const id = sp.get('id')
  const [zt, setZt] = useState()
  const ss=JSON.parse(localStorage.getItem('user'))
  const tt = [
    {
      name: '小明',
      id: '1',
      sfz: '5222212003120048975',
      state: false
    },
    {
      name: '小李',
      id: '2',
      sfz: '5222212003120048975',
      state: false
    }, {
      name: '张三',
      id: '3',
      sfz: '5222212003120048975',
      state: false
    }, {
      name: '李四',
      id: '4',
      sfz: '5222212003120048975',
      state: false
    },
    {
      name:(ss.name),
      id:'5',
      sfz:(ss.sfz),
      state:false
    }
  ]

  return (
    <div>
      <div style={{ background: 'yellow' }}>
        <NavBar onBack={() => nav(-1)}>填写订单</NavBar>
      </div>
      <div>
        <p><Tag>1程</Tag> {dayjs().format('MM月DD日')} 北京→济南西  二等座</p>
        <p><Tag>2程</Tag>  {dayjs().format('MM月DD日')} 济南西→上海  二等座（补票）</p>
        <p>车票 ￥{price} 出行无忧 ￥62</p>
      </div>
      <div>
        <h3>选择乘客</h3>
        {
          tt.map((item, index) => {
            return <List key={index} onClick={() => {
              setZt(Prev=>Prev+1)
            }}>
              <List.Item arrowIcon={<Checkbox 
              ></Checkbox>}>{item.name} <span>{item.sfz}</span> </List.Item>
            </List>
          })
        }
      </div>
      <div>
        <Button block onClick={()=>nav('/add')}>
          <AddCircleOutline /> 添加
        </Button>
      </div>
      <div className='demo-action-bar'>
        <ActionBar>
          <ActionBar.Icon
            icon={`￥${price}`}
            text='订单总价'
            onClick={() => console.log('chat click')}
          />
          <ActionBar.Button
            type='danger'
            text='去支付'
            onClick={()=>nav(`/pay?start=${start}&end=${end}&startTime=${startTime}&endTime=
              ${endTime}&cc=${cc}&time=${time}&price=${price}&id=${id}`)}
            />
        </ActionBar>
      </div>
    </div>
  )
}

export default Index
